<template>
  <div class="user-dept-management-page">
    <el-row :gutter="20">
      <!-- 部门树 -->
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="card-title">
                <el-icon><OfficeBuilding /></el-icon>
                部门结构
              </span>
              <el-button type="primary" size="small" @click="showAddDeptDialog">
                <el-icon><Plus /></el-icon>
                新增部门
              </el-button>
            </div>
          </template>

          <el-tree
            :data="departmentTree"
            :props="treeProps"
            node-key="id"
            :expand-on-click-node="false"
            :default-expand-all="true"
            @node-click="handleDeptClick"
          >
            <template #default="{ node, data }">
              <div class="tree-node">
                <span class="node-label">{{ node.label }}</span>
                <div class="node-actions">
                  <el-button link size="small" @click.stop="editDepartment(data)">
                    <el-icon><Edit /></el-icon>
                  </el-button>
                  <el-button link size="small" @click.stop="deleteDepartment(data)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
          </el-tree>
        </el-card>
      </el-col>

      <!-- 用户列表 -->
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="card-title">
                <el-icon><User /></el-icon>
                用户管理
                <span v-if="selectedDept" class="dept-info">（{{ selectedDept.name }}）</span>
              </span>
              <el-button type="primary" @click="showAddUserDialog">
                <el-icon><Plus /></el-icon>
                新增用户
              </el-button>
            </div>
          </template>

          <!-- 筛选条件 -->
          <div class="filter-bar">
            <el-form :model="filterForm" inline>
              <el-form-item label="用户名">
                <el-input v-model="filterForm.username" placeholder="请输入用户名" clearable @change="loadUsers" />
              </el-form-item>
              <el-form-item label="角色">
                <el-select v-model="filterForm.role" placeholder="请选择角色" clearable @change="loadUsers">
                  <el-option label="全部" value="" />
                  <el-option label="管理员" value="admin" />
                  <el-option label="普通用户" value="user" />
                  <el-option label="观察者" value="observer" />
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="filterForm.status" placeholder="请选择状态" clearable @change="loadUsers">
                  <el-option label="全部" value="" />
                  <el-option label="启用" value="active" />
                  <el-option label="禁用" value="inactive" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loadUsers" :loading="loading">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
                <el-button @click="resetFilter" :loading="loading">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 用户表格 -->
          <el-table :data="userList" v-loading="loading" stripe>
            <el-table-column prop="username" label="用户名" width="120" />
            <el-table-column prop="realName" label="真实姓名" width="120" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="phone" label="电话" width="120" />
            <el-table-column prop="role" label="角色" width="100">
              <template #default="{ row }">
                <el-tag :type="getRoleType(row.role)">
                  {{ getRoleText(row.role) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
                  {{ row.status === 'active' ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastLogin" label="最后登录" width="160" />
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <div class="action-buttons">
                  <el-button type="primary" size="small" @click="editUser(row)">
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button
                    :type="row.status === 'active' ? 'warning' : 'success'"
                    size="small"
                    @click="toggleUserStatus(row)"
                  >
                    {{ row.status === 'active' ? '禁用' : '启用' }}
                  </el-button>
                  <el-button type="danger" size="small" @click="deleteUser(row)">
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="loadUsers"
              @current-change="loadUsers"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog
      v-model="userDialogVisible"
      :title="userDialogMode === 'add' ? '新增用户' : '编辑用户'"
      width="600px"
    >
      <el-form :model="userForm" :rules="userRules" ref="userFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" :disabled="userDialogMode === 'edit'" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="userForm.realName" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="userForm.phone" />
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          <el-tree-select
            v-model="userForm.deptId"
            :data="departmentTree"
            :props="treeProps"
            placeholder="请选择部门"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" style="width: 100%">
            <el-option label="管理员" value="admin" />
            <el-option label="普通用户" value="user" />
            <el-option label="观察者" value="observer" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="userDialogMode === 'add'" label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="userForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="userDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser" :loading="saving">保存</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑部门对话框 -->
    <el-dialog
      v-model="deptDialogVisible"
      :title="deptDialogMode === 'add' ? '新增部门' : '编辑部门'"
      width="500px"
    >
      <el-form :model="deptForm" :rules="deptRules" ref="deptFormRef" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="deptForm.name" />
        </el-form-item>
        <el-form-item label="上级部门" prop="parentId">
          <el-tree-select
            v-model="deptForm.parentId"
            :data="departmentTree"
            :props="treeProps"
            placeholder="请选择上级部门（可选）"
            style="width: 100%"
            clearable
          />
        </el-form-item>
        <el-form-item label="部门描述" prop="description">
          <el-input v-model="deptForm.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="deptForm.sort" :min="0" :max="999" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="deptDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDept" :loading="saving">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, effect } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, OfficeBuilding, Plus, Edit, Delete, Search
} from '@element-plus/icons-vue'
import { useMockData } from '@/config/app.js'
import { usersService, departmentsService } from '@/services/dataService.js'

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const userDialogVisible = ref(false)
const deptDialogVisible = ref(false)
const userDialogMode = ref('add') // add | edit
const deptDialogMode = ref('add') // add | edit
const userFormRef = ref(null)
const deptFormRef = ref(null)
const selectedDept = ref(null)

// 部门树配置
const treeProps = {
  children: 'children',
  label: 'name',
  value: 'id'
}

// 部门树数据
const departmentTree = ref([])

// 筛选表单
const filterForm = reactive({
  username: '',
  role: '',
  status: ''
})

// 用户列表
const userList = ref([])

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 用户表单
const userForm = reactive({
  id: null,
  username: '',
  realName: '',
  email: '',
  phone: '',
  deptId: null,
  role: 'user',
  password: '',
  status: 'active'
})

// 部门表单
const deptForm = reactive({
  id: null,
  name: '',
  parentId: null,
  description: '',
  sort: 0
})

// 用户表单验证规则
const userRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  deptId: [
    { required: true, message: '请选择所属部门', trigger: 'change' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 部门表单验证规则
const deptRules = {
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ]
}

// 加载用户列表
const loadUsers = async () => {
  loading.value = true
  try {
    if (useMockData()) {
      // 使用虚拟数据
      console.log('使用虚拟数据模式')

      // 生成模拟数据
      const mockUsers = []
      for (let i = 1; i <= 50; i++) {
        const deptIds = [2, 3, 4, 5, 6, 7, 8]
        const roles = ['admin', 'user', 'observer']
        const statuses = ['active', 'inactive']

        mockUsers.push({
          id: i,
          username: `user${i}`,
          realName: `用户${i}`,
          email: `user${i}@company.com`,
          phone: `138${String(i).padStart(8, '0')}`,
          deptId: deptIds[Math.floor(Math.random() * deptIds.length)],
          role: roles[Math.floor(Math.random() * roles.length)],
          status: statuses[Math.floor(Math.random() * statuses.length)],
          lastLogin: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleString()
        })
      }

      // 应用筛选条件
      let filteredUsers = mockUsers
      if (filterForm.username) {
        filteredUsers = filteredUsers.filter(user =>
          user.username.includes(filterForm.username) ||
          user.realName.includes(filterForm.username)
        )
      }
      if (filterForm.role) {
        filteredUsers = filteredUsers.filter(user => user.role === filterForm.role)
      }
      if (filterForm.status) {
        filteredUsers = filteredUsers.filter(user => user.status === filterForm.status)
      }
      if (selectedDept.value) {
        filteredUsers = filteredUsers.filter(user => user.deptId === selectedDept.value.id)
      }

      userList.value = filteredUsers
      pagination.total = filteredUsers.length
    } else {
      // 使用真实API
      console.log('使用真实API模式')

      // 构建查询参数
      const params = {
        page: pagination.currentPage,
        size: pagination.pageSize
      }

      // 添加筛选条件
      if (filterForm.username) {
        params.search = filterForm.username
      }
      if (filterForm.role) {
        params.role = filterForm.role
      }
      if (filterForm.status) {
        params.status = filterForm.status
      }
      if (selectedDept.value) {
        params.dept_id = selectedDept.value.id
      }

      const response = await usersService.getUsers(params)

      // 检查响应格式并处理: {code: 200, data: {list: [...], total: 1}, success: true}
      if (response && response.success && response.data) {
        let userList_data = []

        // 从response.data.list中获取用户数据
        if (response.data.list && Array.isArray(response.data.list)) {
          userList_data = response.data.list
        }
        // 如果data直接是数组
        else if (Array.isArray(response.data)) {
          userList_data = response.data
        }
        // 如果data是单个对象
        else if (typeof response.data === 'object' && response.data.id) {
          userList_data = [response.data]
        }


        // 确保userList_data是数组后再进行map操作
        if (Array.isArray(userList_data)) {
          // 转换API数据格式为页面需要的格式
          userList.value = userList_data.map(user => ({
            id: user.id,
            username: user.username,
            realName: user.name || user.real_name || user.realName,
            email: user.email,
            phone: user.phone || '',
            deptId: user.dept_id || user.deptId,
            role: user.role,
            status: user.status,
            lastLogin: user.last_login ? new Date(user.last_login).toLocaleString() : '从未登录'
          }))
        } else {
          console.error('用户数据不是数组格式:', userList_data)
          userList.value = []
        }

        // 设置总数
        pagination.total = response.data.total || userList_data.length
      } else {
        throw new Error(response.message || '获取用户列表失败')
      }
    }

    ElMessage.success('用户列表加载成功')
  } catch (error) {
    console.error('加载用户列表失败:', error)
    ElMessage.error('加载用户列表失败')
  } finally {
    loading.value = false
  }
}

// 获取角色类型
const getRoleType = (role) => {
  const types = {
    admin: 'danger',
    user: 'success',
    observer: 'info'
  }
  return types[role] || 'info'
}

// 获取角色文本
const getRoleText = (role) => {
  const texts = {
    admin: '管理员',
    user: '普通用户',
    observer: '观察者'
  }
  return texts[role] || '未知'
}

// 构建部门树形结构
const buildDepartmentTree = (departments) => {
  if (!Array.isArray(departments) || departments.length === 0) {
    return []
  }

  // 创建一个映射表
  const departmentMap = new Map()
  const rootDepartments = []

  // 首先将所有部门添加到映射表中，并初始化children数组
  departments.forEach(dept => {
    departmentMap.set(dept.id, { ...dept, children: [] })
  })

  // 构建树形结构
  departments.forEach(dept => {
    const deptNode = departmentMap.get(dept.id)

    if (dept.parent_id === null || dept.parent_id === undefined) {
      // 根部门
      rootDepartments.push(deptNode)
    } else {
      // 子部门
      const parentNode = departmentMap.get(dept.parent_id)
      if (parentNode) {
        parentNode.children.push(deptNode)
      } else {
        // 如果找不到父部门，将其作为根部门
        rootDepartments.push(deptNode)
      }
    }
  })

  return rootDepartments
}

// 重置查询条件
const resetFilter = () => {
  filterForm.username = ''
  filterForm.role = ''
  filterForm.status = ''
  selectedDept.value = null
  loadUsers()
}

// 处理部门点击
const handleDeptClick = (data) => {
  selectedDept.value = data
  loadUsers()
}

// 显示新增用户对话框
const showAddUserDialog = () => {
  userDialogMode.value = 'add'
  resetUserForm()
  userDialogVisible.value = true
}

// 编辑用户
const editUser = (user) => {
  userDialogMode.value = 'edit'
  Object.assign(userForm, { ...user, password: '' })
  userDialogVisible.value = true
}

// 重置用户表单
const resetUserForm = () => {
  Object.assign(userForm, {
    id: null,
    username: '',
    realName: '',
    email: '',
    phone: '',
    deptId: selectedDept.value?.id || null,
    role: 'user',
    password: '',
    status: 'active'
  })
}

// 保存用户
const saveUser = async () => {
  try {
    await userFormRef.value.validate()

    saving.value = true

    if (useMockData()) {
      // 使用虚拟数据 - 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000))
    } else {
      // 使用真实API

      // 构建用户数据
      const userData = {
        username: userForm.username,
        name: userForm.realName,
        email: userForm.email,
        phone: userForm.phone,
        dept_id: userForm.deptId,
        role: userForm.role,
        status: userForm.status
      }

      // 如果是新增用户，添加密码
      if (userDialogMode.value === 'add') {
        userData.password = userForm.password
      }

      let response
      if (userDialogMode.value === 'add') {
        response = await usersService.createUser(userData)
      } else {
        response = await usersService.updateUser(userForm.id, userData)
      }

      if (!response.success) {
        throw new Error(response.message || '保存用户失败')
      }
    }

    ElMessage.success(userDialogMode.value === 'add' ? '用户创建成功' : '用户更新成功')
    userDialogVisible.value = false
    loadUsers()
  } catch (error) {
    console.error('保存用户失败:', error)
    if (error !== false) { // 不是表单验证错误
      ElMessage.error('保存用户失败')
    }
  } finally {
    saving.value = false
  }
}

// 切换用户状态
const toggleUserStatus = async (user) => {
  try {
    const action = user.status === 'active' ? '禁用' : '启用'
    await ElMessageBox.confirm(
      `确定要${action}用户 "${user.realName}" 吗？`,
      `确认${action}`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    if (useMockData()) {
      // 使用虚拟数据 - 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 500))
      user.status = user.status === 'active' ? 'inactive' : 'active'
    } else {
      // 使用真实API

      const newStatus = user.status === 'active' ? 'inactive' : 'active'
      const response = await usersService.updateUser(user.id, { status: newStatus })

      if (response.success) {
        user.status = newStatus
      } else {
        throw new Error(response.message || '切换用户状态失败')
      }
    }

    ElMessage.success(`用户${action}成功`)
  } catch (error) {
    if (error !== 'cancel') {
      console.error('切换用户状态失败:', error)
      ElMessage.error('操作失败')
    }
  }
}

// 删除用户
const deleteUser = async (user) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户 "${user.realName}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    if (useMockData()) {
      // 使用虚拟数据 - 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 500))

      // 从列表中移除
      const index = userList.value.findIndex(item => item.id === user.id)
      if (index > -1) {
        userList.value.splice(index, 1)
        pagination.total--
      }
    } else {
      // 使用真实API

      const response = await usersService.deleteUser(user.id)

      if (response.success) {
        // 从列表中移除
        const index = userList.value.findIndex(item => item.id === user.id)
        if (index > -1) {
          userList.value.splice(index, 1)
          pagination.total--
        }
      } else {
        throw new Error(response.message || '删除用户失败')
      }
    }

    ElMessage.success('用户删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除用户失败:', error)
      ElMessage.error('删除用户失败')
    }
  }
}

// 显示新增部门对话框
const showAddDeptDialog = () => {
  deptDialogMode.value = 'add'
  resetDeptForm()
  deptDialogVisible.value = true
}

// 编辑部门
const editDepartment = (dept) => {
  deptDialogMode.value = 'edit'
  Object.assign(deptForm, dept)
  deptDialogVisible.value = true
}

// 重置部门表单
const resetDeptForm = () => {
  Object.assign(deptForm, {
    id: null,
    name: '',
    parentId: null,
    description: '',
    sort: 0
  })
}

// 保存部门
const saveDept = async () => {
  try {
    await deptFormRef.value.validate()

    saving.value = true

    if (useMockData()) {
      // 使用虚拟数据 - 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000))
    } else {
      // 使用真实API

      // 构建部门数据
      const deptData = {
        name: deptForm.name,
        parent_id: deptForm.parentId,
        description: deptForm.description,
        sort: deptForm.sort
      }

      let response
      if (deptDialogMode.value === 'add') {
        response = await departmentsService.createDepartment(deptData)
      } else {
        response = await departmentsService.updateDepartment(deptForm.id, deptData)
      }

      if (!response.success) {
        throw new Error(response.message || '保存部门失败')
      }
    }

    ElMessage.success(deptDialogMode.value === 'add' ? '部门创建成功' : '部门更新成功')
    deptDialogVisible.value = false
    // 重新加载部门树
    loadDepartments()
  } catch (error) {
    console.error('保存部门失败:', error)
    if (error !== false) { // 不是表单验证错误
      ElMessage.error('保存部门失败')
    }
  } finally {
    saving.value = false
  }
}

// 删除部门
const deleteDepartment = async (dept) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除部门 "${dept.name}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    if (useMockData()) {
      // 使用虚拟数据 - 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 500))
    } else {

      const response = await departmentsService.deleteDepartment(dept.id)

      if (!response.success) {
        throw new Error(response.message || '删除部门失败')
      }
    }

    ElMessage.success('部门删除成功')
    // 重新加载部门树
    loadDepartments()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除部门失败:', error)
      ElMessage.error('删除部门失败')
    }
  }
}

// 加载部门数据
const loadDepartments = async () => {
  try {

    if (useMockData()) {
      // 使用虚拟数据
      departmentTree.value = [
        {
          id: 1,
          name: '总公司',
          children: [
            {
              id: 2,
              name: '研发部',
              children: [
                { id: 5, name: '前端组' },
                { id: 6, name: '后端组' }
              ]
            },
            {
              id: 3,
              name: '测试部',
              children: [
                { id: 7, name: '功能测试组' },
                { id: 8, name: '自动化测试组' }
              ]
            },
            { id: 4, name: '产品部' }
          ]
        }
      ]
    } else {
      // 使用真实API
      const response = await departmentsService.getDepartments()

      // 处理API响应格式: {code: 200, data: {list: [...], total: 1}, success: true}
      let departmentData = []

      if (response && response.success && response.data) {
        // 从response.data.list中获取部门数据
        if (response.data.list && Array.isArray(response.data.list)) {
          departmentData = response.data.list
        }
        // 如果data直接是数组
        else if (Array.isArray(response.data)) {
          departmentData = response.data
        }
        // 如果data是单个对象
        else if (typeof response.data === 'object' && response.data.id) {
          departmentData = [response.data]
        }
      }
      // 如果响应直接是数组（兼容其他格式）
      else if (Array.isArray(response)) {
        departmentData = response
      }

      // 将扁平的部门数据转换为树形结构
      departmentTree.value = buildDepartmentTree(departmentData)
    }
  } catch (error) {
    console.error('加载部门列表失败:', error)
    ElMessage.error('加载部门列表失败: ' + error.message)

    // 出错时使用默认数据
    departmentTree.value = [
      {
        id: 1,
        name: '默认部门',
        children: []
      }
    ]
  }
}

// 组件挂载时加载数据
onMounted(() => {
  // 检查认证状态
  const token = localStorage.getItem('auth_token')

  loadDepartments()
  loadUsers()
})
</script>

<style scoped>
.user-dept-management-page {
  max-width: 1400px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.dept-info {
  color: #909399;
  font-weight: normal;
  font-size: 14px;
}

.tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 8px;
}

.node-label {
  flex: 1;
}

.node-actions {
  display: none;
}

.tree-node:hover .node-actions {
  display: flex;
  gap: 4px;
}

.filter-bar {
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-form--inline .el-form-item {
  margin-right: 20px;
  margin-bottom: 10px;
}

.el-tree {
  background: transparent;
}

.el-tree-node__content:hover {
  background-color: #f5f7fa;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.action-buttons .el-button {
  margin: 0;
  white-space: nowrap;
}
</style>

<style scoped>
.user-dept-management-page {
  max-width: 1400px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.placeholder-content {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: #409EFF;
}

.placeholder-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.placeholder-content p {
  margin: 0;
  font-size: 14px;
}
</style>
